<template>
	<view style="height:100%;">
		<view class="plr">
			<title title="热门推荐"></title>
		</view>
		<scroll-view scroll-x="true" v-if="list.length!=0">
			<view class="hot-list">
				<view class="hot-item" v-for="(item,index) in list" @click="handDetails(item)">
					<image v-if="item.titleImg" class="hot-img" :src="item.titleImg" mode="aspectFill"></image>
					<view class="hot-t">
						{{item.title}}
					</view>
					<view class="hot-time">
						<text>{{typeList[Number(item.category)]}}</text>
						<text style="margin: 0 16upx;">|</text>
						<text>{{item.createTime}}</text>
					</view>
				</view>


			</view>
		</scroll-view>
		<u-empty margin-top='20' font-size='24' icon-size='80' :show='list.length==0' text="暂无热门推荐"></u-empty>
	</view>
</template>

<script>
	import title from '@/components/bs-title/bs-title.vue'
	import bsList from '@/components/bs-list/bs-list.vue'
	export default {
		components: {
			title,
			bsList
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				typeList: ['新闻资讯', '协会动态', '热点话题', '攻略指南', '政策研究', '行业公示', '下载中心', '年度人物大赛报道', '年度人物往期回顾', '年度人物公益巡演', '金鹰奖大赛报道',
					'金鹰奖往期回顾',
					'科技奖获奖公示', '科技奖相关资讯'
				],
				status: 'nomore',
				page: 0,
				props: {}
			};
		},
		methods: {
			//查看详情
			handDetails(item) {
				uni.navigateTo({
					url: '/pages/my/myCollect/newPage/newPage?newsId=' + item.newsId
				})
			},
			//查看更多
			handMore() {
				uni.navigateTo({
					url: '/pages/avtiveityConter/avtiveityConter?index=1',
					fail: function(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-list {
		display: flex;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;

		.hot-item {
			width: 540upx;
			min-width: 540upx;
			margin-right: 20upx;
			box-sizing: border-box;

			.hot-img {
				width: 540upx;

				height: 260upx;
				border-radius: 12upx;
				margin-bottom: 20upx;
			}

			.hot-t {
				margin-bottom: 20upx;
				font-size: 32upx;
				font-weight: bold;
			}

			.hot-time {
				color: #9A9A9A;
				font-size: 24upx;
			}
		}
	}
</style>
